<!-- 班级选择 -->
<template>
    <transition name='fade'>
        <div class="mask" v-show="classMaskShow">
            <div class="mask-close" @click="classClose()"></div>
            <transition name='slideup'>
                <div class="class-box" v-show="classMaskShow">
                    <div class="grade-close" @click="classClose()"></div>
                    <ul>
                        <li :class="['left',{'ischose':classChose==index}]" v-for="(item,index) in classList" :key="index">
                            <span  @click="classChoseFun(item,index)">{{item.name}}</span>
                        </li>
                    </ul>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>

export default {
    name: "classStudent",
    props:[
        "classMaskShow",
        "classList",
        "classChose"
    ],
    data(){
        return{
            
           
        }
    },
    watch:{
        classMaskShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
    },
    created(){ 
        
    },
    mounted(){
    },
    methods:{
        classClose(){
            this.$emit('classClose')
        },
        classChoseFun(item,index){
            this.$emit('classChoseFun',item,index)
        },
    }
}
</script>
<style type="text/css" scoped>

</style>